<template>
  <div>
    <div id="container">
      <baidu-map class="bm-view" center="西安" :zoom="12">
        <!-- 缩放控件 -->
     <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
        <bm-marker
        v-for="(item,index) in mapObj"
                :key="index"
                :position="item"
          :dragging="false"
          @click="toLight(item)"
        >
        <bm-label :content="item.lpId"
                    :labelStyle="{color: 'red', fontSize : '10px'}"
                    :offset="{width: -10, height: 20}" 
                    />
        </bm-marker>
      </baidu-map>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      markerPoint: { lng: 108.961972, lat: 34.307429 },
      mapObj:[]
    };
  },
  methods: {
    toLight(item) {
      sessionStorage.setItem("item", JSON.stringify(item));
        this.$router.push("/light");
    },
    loadMount() {
      this.$axios.get("lights").then((res) => {
        this.mapObj = res.data.data.pointList;
      });
    },
    
  },
  mounted() {
    this.loadMount();
  },
};
</script>
<style>
.bm-view {
  width: 100%;
  height: 500px;
}
/* BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。 */
</style>